@import '@/styles/color';
@import '@/styles/token';
// 去除当前model的padding
.created-modal-style {
  :global {
    .ant-modal-header {
      margin-bottom: 0;
      height: 40px;
      padding: @padding @paddingLg;
      box-sizing: content-box;
      // background-color: @WHITE04;
    }

    .ant-modal-title {
      font-weight: unset;
    }

    .ant-modal-close {
      height: 40px;
      width: 44px;
      top: @padding;
      right: @paddingLg;

      .ant-modal-close-x {
        font-size: 20px;
        color: @colorTextSecondary;
      }
    }

    // .ant-modal-body {
    //   height: calc(100% - 40px - @padding);
    // }

    .ant-modal-content {
      padding: 0;
    }
  }
}

.add-button {
  background: @colorPrimaryBg !important;

  &.add-button-added {
    background: transparent !important;
    color: @colorText !important;
    border-color: transparent !important;
  }
}

.filter-bar {
  justify-content: flex-end;
  padding: @padding @paddingLg;
  border-bottom: @lineWidth solid @colorSplit;
}
// 头部样式
.segmented-style {
  --xagi-segmented-track-padding: 2px;

  border-radius: @borderRadius;

  :global {
    .ant-segmented-group {
      gap: @paddingXxs;

      .ant-segmented-item-label {
        font-size: @fontSize;
      }

      .ant-segmented-item {
        border-radius: calc(
          @borderRadius - var(--xagi-segmented-track-padding)
        );

        &.ant-segmented-item-selected {
          color: @colorPrimaryText;
          font-weight: @fontWeightStrong;
        }
      }
    }
  }
}

.created-title-text {
  margin-right: @paddingLg;
  font-size: @fontSizeLg;
  color: @colorText;
  line-height: 40px;
}

// 内容部分
.created-container {
  height: 70vh;
  max-height: 700px;
  min-height: 400px;
  border-top: @lineWidth solid @colorSplit;
  overflow: hidden;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  // 侧边栏样式
  // .aside-style {
  //   box-sizing: border-box;
  //   padding: 0 20px;
  //   background-color: @GRAY06;
  //   height: 100%;
  //   padding-top: 20px;
  //   width: 270px;
  //   // 替换menu的默认选中样式
  //   .ant-menu-item-selected {
  //     color: @BLANK04;
  //     background-color: @BLANK06;
  //   }
  // }
  // // 消除右侧的边框
  // .ant-menu-light.ant-menu-root.ant-menu-inline {
  //   border-inline-end: none;
  //   background-color: @GRAY06;
  // }
  // 右侧主题内容
  .main-style {
    // background-color: @WHITE04;
    height: 100%;
    overflow-y: auto;
    // 添加 鼠标不可选择
    user-select: none;
    padding: 0 @paddingLg;

    // 每一个样式
    .list-item-style {
      padding: @padding 0;
      box-sizing: content-box;
      border-bottom: @lineWidth solid @colorSplit;

      .left-image-style {
        width: 40px;
        height: 40px;
        border-radius: @borderRadius;
        overflow: hidden;
        margin-right: @margin;

        svg {
          width: 40px;
          height: 40px;
        }
      }

      .content-font {
        margin-right: @margin;
        display: flex;
        flex-direction: column;
        gap: @marginXxs;

        .count-div-style {
          font-size: @fontSizeSm;
          color: @colorTextTertiary;
          line-height: 19px;

          img {
            width: 12px;
            height: 12px;
            margin-right: @marginXxs;
          }
        }
      }

      .label-font-style {
        font-size: @fontSize;
        font-weight: @fontWeightStrong;
        color: @colorText;
        line-height: 24px;
      }
    }
  }
}

.collect-star {
  color: rgb(251, 224, 20);
}

.icon-margin {
  margin-right: 4px;
}

.created-description-style {
  max-height: 22px;
  max-width: 580px;
  word-break: break-word;
  line-height: 22px;
  font-size: @fontSize;
  color: @colorTextSecondary;
}
